"use client";
import { LogEntry } from '@/app/earth/Map';

interface LogPanelProps {
  logs: LogEntry[];
}

export const LogPanel = ({ logs }: LogPanelProps) => {
  return (
    <div style={{ 
      flex: 1,
      backgroundColor: 'white',
      borderRadius: 8,
      boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
      overflow: 'hidden'
    }}>
      <div style={{ 
        padding: 16,
        borderBottom: '1px solid #eee',
        backgroundColor: '#f8f9fa'
      }}>
        <h3 style={{ margin: 0, fontSize: 16 }}>实时通信日志</h3>
      </div>
      <div style={{ 
        height: 'calc(100% - 57px)',
        overflowY: 'auto',
        padding: 16
      }}>
        {logs.map((log, i) => (
          <div key={i} style={{ 
            marginBottom: 12,
            padding: 12,
            borderRadius: 6,
            backgroundColor: log.type === 'client' ? '#e3f2fd' : '#f3e5f5',
            boxShadow: '0 1px 2px rgba(0,0,0,0.05)'
          }}>
            <div style={{ 
              display: 'flex',
              justifyContent: 'space-between',
              marginBottom: 8,
              fontSize: 14
            }}>
              <span style={{ 
                color: log.type === 'client' ? '#1565c0' : '#6a1b9a',
                fontWeight: 500
              }}>
                {log.type === 'client' ? '客户端 → 服务端' : '服务端 → 客户端'}
              </span>
              <span style={{ color: '#666' }}>
                {new Date(log.timestamp).toLocaleTimeString()}
              </span>
            </div>
            <pre style={{ 
              margin: 0,
              whiteSpace: 'pre-wrap',
              fontSize: 13,
              fontFamily: 'Menlo, Monaco, Consolas, "Courier New", monospace'
            }}>
              {JSON.stringify(log.message, null, 2)}
            </pre>
          </div>
        ))}
      </div>
    </div>
  );
};
